<%@page import="classes.LifebookUser"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <link href = "bootstrap//css//bootstrap.css" rel = "stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>

    <body style ="background-image:url('bg.png')">

        <%
            LifebookUser user = (LifebookUser) session.getAttribute("user");
            if (user != null) {
                response.sendRedirect("browse.jsp");
            }
        %>
        <!-- navbar -->

        <div class="navbar">
            <div class="navbar-inner">
                <a class="brand" href="#"><b class ="life">Life</b><b class = "book">Book</b></a>        
                <form class="navbar-form pull-right" action = "LifeBookLoginServlet">
                    <input class="span2" type="text" placeholder="Username" name = "username">
                    <input class="span2" type="password" placeholder="Password" name = "password">
                    <button type="submit" class="btn btn-success">Submit</button>
                </form>
            </div>
        </div>

        <div class = "container">
            <div class = "row">
                <div class = "span8">
                    </br></br></br></br></br></br>
                    <div id="myCarousel" class="carousel slide">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <div class="active item"><img src = "Logo.png"=></div>
                            <div class="item"><img src = "Yoga.png"></div>
                            <div class="item"><img src = "architecture.png"></div>
                        </div>
                        <!-- Carousel nav -->
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                    </br></br></br></br></br></br></br>
                </div>

                <div class = "span4" style = "background-color:rgba(141,198, 63, 0.3)">
                    <div class = "span6">
                        <form class = "form-signing" action = "RegisterAccountServlet">
                            <h2 class = "form-signin-heading">Sign Up</h2>
                            <h4>Username:</h4>
                            <input name = "username" class ="input-large" id = "username" type = "text" placeholder = "Username" onKeyUp="validate();">
                            <h4>Email:</h4>
                            <input name = "email" id = "email" type = "text" placeholder = "Email" onKeyUp="validate();">
                            <h4>Password:</h4>
                            <input name = "password" id = "pass1" type = "password" placeholder = "Password" onKeyUp="validate();">
                            <h4>Confirm Password:</h4>
                            <input id = "pass2" type = "password" placeholder = "Confirm Password" onKeyUp="validate();">
                            <h4>Full Name:</h4>
                            <input name = "firstname" id = "firstname" type = "text" placeholder = "First Name" onKeyUp="validate();">
                            </br>
                            <input name = "lastname" id = "lastname" type = "text" placeholder = "Last Name" onKeyUp="validate();">
                            <h4>Sex:</h4>
                            <select name = "sex">
                                <option value = "male">Male</option>
                                <option value = "female">Female</option>
                            </select>
                            <h4>Birthday:</h4>
                            <input id = "birthday" type="date" name = "birthday" onChange = "validate();">
                            </br>
                            <button id = "submit" class = "btn btn-large btn-primary" type = "submit" disabled>Sign Up</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>


        <script>
                                function validate() {
                                    var formCheck = new Boolean(true);

                                    //Username
                                    var username = $("#username").val();
                                    if (username.length >= 6) {
                                        $("#username").css({'backgroundColor': 'lightgreen'});
                                    } else if (username.length === 0) {
                                        $("#username").css({'backgroundColor': 'white'});
                                        formCheck = false;
                                    } else {
                                        $("#username").css({'backgroundColor': 'pink'});
                                        formCheck = false;
                                    }
                                    $.ajax({
                                        type: 'POST',
                                        url: '/LifeBook/CheckIfUserExistsServlet',
                                        data: {
                                            username: username
                                        },
                                        success: function(msg) {
                                            var result = eval("(" + msg + ")");
                                            if (result.userexists) {
                                                $("#username").css({'backgroundColor': 'pink'});
                                                formCheck = false;
                                            }
                                        }
                                    });

                                    //Email
                                    var email = $("#email").val();
                                    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
                                        $("#email").css({'backgroundColor': 'lightgreen'});
                                    } else if (email.length === 0) {
                                        $("#email").css({'backgroundColor': 'white'});
                                        formCheck = false;
                                    }
                                    else {
                                        $("#email").css({'backgroundColor': 'pink'});
                                        formCheck = false;
                                    }

                                    //Password
                                    var pass1 = $("#pass1").val();
                                    var pass2 = $("#pass2").val();
                                    if (pass1.length >= 6) {
                                        $("#pass1").css({'backgroundColor': 'lightgreen'});
                                    } else if (pass1.length === 0) {
                                        $("#pass1").css({'backgroundColor': 'white'});
                                        formCheck = false;
                                    } else {
                                        $("#pass1").css({'backgroundColor': 'pink'});
                                        formCheck = false;
                                    }
                                    if (pass2.length === 0) {
                                        $("#pass2").css({'backgroundColor': 'white'});
                                        formCheck = false;
                                    }
                                    else if (pass1 === pass2) {
                                        $("#pass2").css({'backgroundColor': 'lightgreen'});
                                    } else {
                                        $("#pass2").css({'backgroundColor': 'pink'});
                                        formCheck = false;
                                    }

                                    //Firstname
                                    var firstname = $("#firstname").val();
                                    if (firstname.length >= 1) {
                                        $("#firstname").css({'backgroundColor': 'lightgreen'});
                                    } else {
                                        $("#firstname").css({'backgroundColor': 'pink'});
                                        formCheck = false;
                                    }

                                    //Lastname
                                    var lastname = $("#lastname").val();
                                    if (lastname.length >= 1) {
                                        $("#lastname").css({'backgroundColor': 'lightgreen'});
                                    } else {
                                        $("#lastname").css({'backgroundColor': 'pink'});
                                        formCheck = false;
                                    }

                                    //Birthday
                                    var checkDate = new Date();
                                    checkDate.setUTCFullYear(checkDate.getUTCFullYear() - 18);
                                    if ($("#birthday").val().length === 0) {
                                        $("#birthday").css({'backgroundColor': 'white'});
                                        formCheck = false;
                                    }
                                    else if ($("#birthday").val().substring(0, 4) <= checkDate.getFullYear()) {
                                        $("#birthday").css({'backgroundColor': 'lightgreen'});
                                    } else if ($("#birthday").val().substring(0, 4) > checkDate.getFullYear()) {
                                        $("#birthday").css({'backgroundColor': 'pink'});
                                        formCheck = false;
                                    }

                                    //Enable or Disable Button
                                    if (formCheck)
                                        $("#submit").removeAttr("disabled");
                                    else
                                        $("#submit").attr("disabled", true);
                                }
        </script>
    </body>

</html>
